<template>
    <div>
        <div style="background-color: rgba(239, 250, 251, 1);" :style="{minHeight: cardHeight + 'px'}">
            <div style="padding: 10px 40px;">
                <div class="headerDiv">
                    <a-row>
                        <a-col span="20" class="headerTitle">专家社交名片</a-col>
                        <a-col span="4" style="display: flex; align-items: center;">
                            <a-input-search v-model="searchObj.talentRealName" placeholder="输入姓名搜索"
                                            style="width: 200px" @search="fetchData"/>
                        </a-col>
                    </a-row>
                </div>
                <a-row :gutter="16">
                    <a-spin tip="数据加载中..." v-if="!loading">
                        <div class="spin-content">
                        </div>
                    </a-spin>
                    <div v-else>
                        <div v-for="(item, index) in dataSource" :key="index" @mouseenter="onMouseEnter(index)"
                             @mouseleave="onMouseLeave(index)">
                            <a-col span="6">
                                <div class="content">
                                    <div>
                                        <div :style="cardBkgSty" style="width: 350px;">
                                            <a-row>
                                                <a-col span="24" style="position: relative; height: 30px;">
                                                    <div style="position: absolute; bottom: 0;">
                                                        <span style="font-weight: bold; font-size: 25px;">{{ item.talentRealName }}</span>
                                                        <span style="padding-left: 20px; cursor: pointer;"
                                                              :title="item.talentPartPhoneNumber"
                                                              v-if="item.talentPartPhoneNumber  != null ">
                                                    <a-icon type="phone" color="#33ba99"/>
                                                </span>
                                                    </div>
                                                </a-col>
                                            </a-row>
                                            <a-row>
                                                <a-col span="24" style="font-size: 15px;">
                                                    {{ item.talentCompany }}
                                                </a-col>
                                            </a-row>
                                            <a-row :gutter="24" style=" padding-top: 10px;">
                                                <a-col span="2" style="font-size: 15px;">
                                                    <div :style="jobTitleLogo"></div>
                                                </a-col>
                                                <a-col span="20" :title="item.talentJobTitle" class="content_txt">
                                                    职称：{{ item.talentJobTitle  == '其他' ? '' : item.talentJobTitle  }}
                                                </a-col>
                                            </a-row>
                                            <a-row :gutter="24" style=" padding-top: 5px;">
                                                <a-col span="2" style="font-size: 15px;">
                                                    <div :style="jobLevelLogo"></div>
                                                </a-col>
                                                <a-col span="20" :title="item.talentJobLevel" class="content_txt">
                                                    职务：{{ item.talentJobLevel  == '其他' ? '' : item.talentJobLevel  }}
                                                </a-col>
                                            </a-row>
                                            <a-row :gutter="24" style=" padding-top: 5px;">
                                                <a-col span="2" style="font-size: 15px;">
                                                    <div :style="researchLogo"></div>
                                                </a-col>
                                                <a-col span="20" :title="item.talentFields" class="content_txt">
                                                    研究领域：{{ item.talentGwFields }}
                                                </a-col>
                                            </a-row>
                                            <a-row :gutter="24" style=" padding-top: 5px;">
                                                <a-col span="2" style="font-size: 15px;">
                                                    <div :style="keywordLogo"></div>
                                                </a-col>
                                                <a-col span="20" :title="item.talentFields" class="content_txt">
                                                    关键词：{{ item.talentKeywords != null ? item.talentKeywords : '' }}
                                                </a-col>
                                            </a-row>
                                        </div>
                                        <div class="bottomContain">
                                            {{ item.talentIntro }}
                                        </div>
                                    </div>
                                    <div class="mask" v-if="showMask[index]" @mouseenter="pauseEvent"
                                         @mouseleave="pauseEvent">
                                        <span style="cursor: pointer;" @click="showCardDetailInfo(item)">名片详情</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="cursor: pointer;" @click="showTalentDetailInfo(item)">信息详情</span>
                                    </div>
                                </div>
                            </a-col>
                        </div>
                    </div>
                </a-row>
                <div class="pagCs">
                    <a-pagination :pageSize="searchObj.pageSize" :current="talentCurrentPageNo" :total="parseInt(total)"
                                  :show-total="total => `共 ${total} 条`" @change="onChangeTalentPage"/>
                </div>
            </div>

            <a-modal
                title="名片详情"
                :visible="cardModal"
                :footer="null"
                @cancel="handleCancel"
                :width="500"
            >
                <div :style="cardBkgSty">
                    <a-row>
                        <a-col span="24" style="position: relative; height: 30px;">
                            <div style="position: absolute; bottom: 0;">
                                <span style="font-weight: bold; font-size: 25px;">{{ cardObj.talentRealName }}</span>
                                <span style="padding-left: 20px; cursor: pointer;"
                                      :title="cardObj.talentPartPhoneNumber"
                                      v-if="cardObj.talentPartPhoneNumber  != null ">
                                            <a-icon type="phone" color="#33ba99"/>
                                        </span>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col span="24" style="font-size: 15px; padding-top: 10px;">{{ cardObj.talentCompany }}</a-col>
                    </a-row>
                    <a-row :gutter="24" style=" padding-top: 10px;">
                      <a-col span="2" style="font-size: 15px;">
                        <div :style="jobTitleLogo"></div>
                      </a-col>
                      <a-col span="20" :title="cardObj.talentJobTitle" class="content_txt">
                        职称：{{ cardObj.talentJobTitle  == '其他' ? '' : cardObj.talentJobTitle  }}
                      </a-col>
                    </a-row>
                    <a-row :gutter="24" style=" padding-top: 5px;">
                      <a-col span="2" style="font-size: 15px;">
                        <div :style="jobLevelLogo"></div>
                      </a-col>
                      <a-col span="20" :title="cardObj.talentJobLevel" class="content_txt">
                        职务：{{ cardObj.talentJobLevel  == '其他' ? '' : cardObj.talentJobLevel  }}
                      </a-col>
                    </a-row>
                    <a-row :gutter="24" style=" padding-top: 5px;">
                        <a-col span="2" style="font-size: 15px;">
                            <div :style="researchLogo"></div>
                        </a-col>
                        <a-col span="20" :title="cardObj.talentFields" class="content_txt">
                            研究领域：{{ cardObj.talentFields }}
                        </a-col>
                    </a-row>
                    <a-row :gutter="24" style=" padding-top: 5px;">
                        <a-col span="2" style="font-size: 15px;">
                            <div :style="keywordLogo"></div>
                        </a-col>
                        <a-col span="20" :title="cardObj.talentFields" class="content_txt">
                            关键词：{{ cardObj.talentKeywords != null ? cardObj.talentKeywords : '' }}
                        </a-col>
                    </a-row>
                </div>
                <div class="modalBottomContain">
                    {{ cardObj.talentIntro }}
                </div>
                <br/>
                <div :style="cardBackBkgSty">
                    <a-row>
                        <a-col span="24">
                            <div style="text-align: center; display: flex; flex-direction: column; justify-content: center; height: 200px;">
                                <div style="font-size: 20px;">{{ cardObj.talentCompany }}</div>
                                <div style="padding-top: 10px;">——&nbsp;{{ cardObj.talentRealName }}&nbsp;——</div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>

import {postAction} from "@/api/esManage";

export default {
    name: 'EsTalentBusinessCard',
    data() {
        return {
            cardHeight: 0,
            showMask: [],
            cardBkgSty: {
                backgroundImage: `url(${require('@/assets/card-bkg.jpeg')})`,
                backgroundSize: '100% 100%',
                height: '200px',
                color: '#33ba99',
                padding: '20px',
                border: '1px solid #33ba99'
            },
            cardBackBkgSty: {
                backgroundImage: `url(${require('@/assets/card-back-bkg.jpeg')})`,
                backgroundSize: '100% 100%',
                color: '#33ba99',
                border: '1px solid #33ba99'
            },
            researchLogo: {
                width: '20px',
                height: '20px',
                backgroundImage: `url(${require('@/assets/research-logo.jpeg')})`,
                backgroundSize: '100% 100%',
            },
            jobTitleLogo: {
                width: '20px',
                height: '20px',
                backgroundImage: `url(${require('@/assets/jobTitle-logo.png')})`,
                backgroundSize: '100% 100%',
            },
            jobLevelLogo: {
                width: '20px',
                height: '20px',
                backgroundImage: `url(${require('@/assets/jobLevel-logo.png')})`,
                backgroundSize: '100% 100%',
            },
            keywordLogo: {
                width: '20px',
                height: '20px',
                backgroundImage: `url(${require('@/assets/keyword-logo.jpeg')})`,
                backgroundSize: '100% 100%',
            },
            loading: false,
            searchObj: {
                current: 1,
                pageNo: 1,
                pageSize: 8,
                searchType: 1,
                sortField: "talentCooperationNum"
            },
            talentCurrentPageNo: 1,
            total: 0,
            dataSource: [],
            cardModal: false,
            cardObj: {}
        }
    },
    computed: {},
    created() {
        this.cardHeight = (document.documentElement.clientHeight || document.body.clientHeight);
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.dataSource = [];
            this.loading = false;
            let url = "/talents/manage/pageList";
            this.searchObj.content = this.searchContent
            let that = this;
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    that.dataSource = res.data.result.records;
                    that.total = parseInt(res.data.result.total);
                    that.showMask = new Array(that.dataSource.length).fill(false);
                    that.loading = true;
                }
            }).catch(err => {
                console.log(err)
                this.loading = true;
            })
        },
        onChangeTalentPage(event) {
            // 重新赋值
            this.talentCurrentPageNo = event
            this.searchObj.current = event
            this.searchObj.pageNo = event
            this.fetchData();
        },
        onMouseEnter(index) {
            this.$set(this.showMask, index, true);
        },
        onMouseLeave(index) {
            this.$set(this.showMask, index, false);
        },
        pauseEvent(event) {
            event.stopPropagation();
        },
        showCardDetailInfo(item) {
            this.cardModal = true;
            this.cardObj = item;
        },
        showTalentDetailInfo(item) {
            const routeUrl = this.$router.resolve({
                name: 'esTalentInfo',
                query: {"t": item.id, 'c': item.talentRealName}
            });
            window.open(routeUrl.href, '_blank');
        },
        handleCancel() {
            this.cardModal = false;
        },
    }
}
</script>

<style lang="less" scoped>
.content {
    margin-top: 20px;
}

.mask {
    position: absolute;
    top: 20px;
    left: 8px;
    right: 0;
    width: 350px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottomContain {
    height: 50px;
    width: 350px;
    color: #fff;
    padding: 5px 10px;
    background-color: #33ba99;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 2em; /* 首行缩进 2 个字符的宽度 */
}

.modalBottomContain {
    color: #fff;
    padding: 5px 10px;
    background-color: #33ba99;
    text-indent: 2em; /* 首行缩进 2 个字符的宽度 */
}

.headerDiv {
    background-color: #fff;
    border-bottom: 1px solid #33ba99;
    padding: 15px;
}

.headerTitle {
    color: #33ba99;
    line-height: 32px;
    font-size: 25px;
    font-weight: bold;
}

.content_txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagCs {
    padding: 20px 0;
    text-align: center;
}

.spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}
</style>
